<template>
  <div class="mod-tenant__tenant">
    <template v-if="status == 1">
      <el-form :inline="true" :model="dataForm" v-loading="dataLoading">
        <el-form-item>
          <el-input v-model="name" placeholder="请输入库房名称" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="getHouseList()">{{ $t("query") }}</el-button>
          <el-button @click="back(1)">返回</el-button>
        </el-form-item>
      </el-form>
      <div class="house">
        <div class="house-item" v-for="item in HouseList" :key="item.id" @click="showSimulation(item)">
          <!-- 库房名称 -->
          <p><i class="el-icon-s-home" style="width: 31px; height: 31px"></i>{{ item.name }}</p>
          <!-- 全宗号 -->
          <p>全宗ID:{{ item.generalArchiveName }}</p>
          <!-- 在用密集架 -->
          <p>在用密集架:{{ item.intensiveNumber }}</p>
          <!-- 最大容量 -->
          <p>最大容量:{{ item.capacity }}</p>

          <!-- 已用密集架 -->
          <p>已用:{{ item.hasBeenUsed }}</p>
          <!-- 利用率 -->
          <p>利用率:{{ item.useRatio }}%</p>
        </div>
      </div>
    </template>
    <template v-if="status == 2">
      <el-form :inline="true" :model="dataForm" v-loading="dataLoading">
        <el-form-item>
          <el-input v-model="dataForm.MJH" placeholder="请输入密集架" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="showSimulation(null)">{{ $t("query") }}</el-button>
          <el-button @click="back(1)">返回</el-button>
        </el-form-item>
      </el-form>
      <div class="simulation">
        <div class="header">
          <div class="header-item">
            <p>密集架总数</p>
            <p v-text="oldData.intensiveNumber"></p>
          </div>
          <div class="header-item">
            <p>密集架容量</p>
            <p  v-text="oldData.capacity"></p>
          </div>
          <div class="header-item">
            <p>档案在库</p>
            <p>10</p>
          </div>
          <div class="header-item">
            <p>利用率</p>
            <p v-text="oldData.useRatio"></p>
          </div>
          <div class="header-item">
            <el-button @click="back(1)">返回</el-button>
          </div>
        </div>
        <div class="simulation-list" >
          <div class="simulation-item"  v-for="item in simulationList" :key="item.segmentNo"  @click="goWarehouseCompactShelving(item.segmentNo)">
            <p style="margin-left: 25%">{{item.segmentNo}}</p>
          </div>
        </div>
      </div>
    </template>
    <template v-if="status == 3">
      <el-form :inline="true" :model="dataForm" v-loading="dataLoading">
        <el-form-item>
          <el-input v-model="dataForm.HWH" placeholder="请输入货位号" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="goWarehouseCompactShelving(null)">{{ $t("query") }}</el-button>
          <el-button @click="back(1)">返回</el-button>
        </el-form-item>
      </el-form>
     <div class="big-box">
       <div class="box" v-for="item in warehouseCompactShelvingList" :key="item.code">
         <div class="grid-content bg-purple">{{item.code}}</div>
         <el-progress @click="goWarehouseAreaNumber(item)" :text-inside="true" :stroke-width="50" :percentage="70"></el-progress>
       </div>
     </div>


    </template>
    <template v-if="status == 4">
      <div class="attic">
        <div class="upper-half">
          <div class="title">
          <span v-text="oldWData.segmentNo"></span>  密集架  &nbsp; 格号
            <span v-text="oldWData.code"></span>
          </div>
          <div style="display: flex;flex-wrap: wrap;justify-content: space-between" id="div-box">
            <div class="new-shelf" v-for="(item, index) in dataList" :key="index">
              <div class="MC">
                {{item.fileNumber}}
              </div>
              <div class="MC-last">
                <p>全宗号</p>
                <p>{{item.fileNumber}}</p>
              </div>
              <div class="MC-last">
                <p>年度</p>
                <p>{{item.ND}}</p>
              </div>
              <div class="MC-last">
                <p>保管期限</p>
                <p>{{item.BGQX}}</p>
              </div>
              <div class="MC-last">
                <p>机构（问题）</p>
                <p>{{item.JGWT}}</p>
              </div>
              <div class="MC-last" style="display: flex">
                <div style="height: 100%;width: 50%;border-right: 1px solid rgba(187, 187, 187, 100); ">
                  <p style="writing-mode:vertical-lr">起止件号</p>
                </div>
                <div style="height: 100%;width: 50%;display: flex;flex-flow: column; border-bottom: 1px solid rgba(187, 187, 187, 100);">
                  <div style="height: 100%;width: 100%; border-bottom: 1px solid rgba(187, 187, 187, 100);">{{item.QZ}}</div>
                  <div style="height: 100%;width: 100%;">{{item.JS}}</div>
                </div>
              </div>
              <div class="MC-last">
                <P>盒号</P>
                <P>{{item.HH}}</P>
              </div>
            </div>
          </div>
        </div>
        <div class="Lower-half"></div>

      </div>
    </template>
  </div>
</template>

<script lang="ts">
import useView from "@/hooks/useView";
import { defineComponent, reactive, ref, toRefs } from "vue";

import { IObject } from "@/types/interface";
import ui from "@/utils/ui";
import baseService from "@/service/baseService";
export default defineComponent({
  components: {},
  data() {
    return {

      dataList: [],
      dataForm: {
        name: "",
        MJH:"",
        HWH:""
      },
      HouseList: [],
      fileNumber: "",
      name: "",
      segmentNo: "",
      warehouseId: "",
      status: 1,
      dataLoading: false,
      simulationList: [],
      oldData:{
        intensiveNumber:"",
        capacity:"",useRatio:""
      },
      warehouseCompactShelvingList:[],
      warehouseCompactShelvingHeadList:[],
      oldWData:{segmentNo:"",code:""}
    };
  },
  created() {
    this.getHouseList();
  },
  methods: {
    getHouseList() {

      this.dataLoading = true;
      return baseService
        .get("/archive/warehouse/simulation-page", { fileNumber: this.fileNumber, name: this.name, segmentNo: this.segmentNo, warehouseId: this.segmentNo })
        .then((res) => {
          if (res.code !== 0) {
            return ui.error(res.msg);
          }
          this.HouseList = res.data;
        })
        .catch((e) => {
          ui.error("网络错误");
        })
        .finally(() => {
          this.dataLoading = false;
        });
    },
    showSimulation(item) {
      this.dataLoading = true;
      var parameter = {};
      var url = "/archive/warehouse/simulation-group";
      if(item == null) {
        parameter = { segmentNo: this.dataForm.MJH };
      } else {
        parameter = { warehouseId: item.id };
        this.oldData = item;
      }
      baseService
        .get(url, parameter)
        .then((res) => {
          if (res.code !== 0) {
            return ui.error(res.msg);
          }
          this.status = 2;
          this.simulationList = res.data;
        })
        .catch((e) => {
          ui.error("网络错误");
        })
        .finally(() => {
          this.dataLoading = false;
        });
    },
    back(status) {
      if (status == 1) {
        this.getHouseList();
        this.status = status;
      }

    },
    goWarehouseCompactShelving(segmentNo) {
      this.dataLoading = true;
      this.status = 3;
      var parameter = {};
      if(segmentNo == null || segmentNo == undefined) {
        parameter = {code:this.dataForm.HWH}
      } else {
        parameter = { segmentNo: segmentNo }
      }
      baseService
        .get("/archive/warehouse/simulation-segment",parameter)
        .then((res) => {
          if (res.code !== 0) {
            return ui.error(res.msg);
          }
          this.warehouseCompactShelvingList = res.data
          this.warehouseCompactShelvingList.forEach(i=>{
            this.warehouseCompactShelvingHeadList.push(i.code)
          })
        })
        .catch((e) => {
          ui.error("网络错误");
        })
        .finally(() => {
          this.dataLoading = false;
        });
    },
    goWarehouseAreaNumber(item) {
      this.status = 4;
      this.oldWData = item
      baseService
        .get("/archive/warehouse/simulation-file", { locationId: item.id })
        .then((res) => {
          if (res.code !== 0) {
            return ui.error(res.msg);
          }
          this.dataList = res.data;
        })
        .catch((e) => {
          ui.error("网络错误");
        })
        .finally(() => {
          this.dataLoading = false;
        });
    }
  }
});
</script>
<style lang="less" scoped>
  .new-shelf{
    margin-top: 1%;
    border: 1px solid rgba(187, 187, 187, 100);
    width: 6%;
    height:600px
  }
  .new-shelf p{
    line-height: 100%;
  }
  .MC{
    width: 100%;
    height: 40px;
    border-bottom: 1px solid rgba(187, 187, 187, 100);
  }
  .MC-last{
    width: 100%;
    height: 80px;
    border-bottom: 1px solid rgba(187, 187, 187, 100);
  }
  #div-box{
    &:after {
      content: "";
      width: 15%;
    }
  }
  .big-box{
    display: flex;
    flex-wrap: wrap;
  }
  .simulation{
    &-list{
      margin-top: 3%;
      height: 600px;
      width: 100%;
      overflow:auto;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
    }
    &-item{
      border: 1px solid rgba(187, 187, 187, 100);
      width: 5%;
      height: 100% ;
      margin-left: 2%;
    }
  }

.house {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  &-item {
    width: 264px;
    height: 333px;
    color: rgba(16, 16, 16, 100);
    font-size: 14px;
    border: 1px solid rgba(187, 187, 187, 100);
    display: flex;
    flex-direction: column;
    p {
      margin-left: 24px;
    }
  }
}
.simulation {
  .header {
    display: flex;
    align-items: center;
    justify-content: space-around;
    &-item {
      border: 1px solid rgba(187, 187, 187, 100);
      padding: 24px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
}

.box {
  margin-bottom: 8px;
  width: 25%;
  margin-left: 8px;
}
.el-row {
  margin-bottom: 2px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: rgb(194, 199, 204);
}
.bg-purple {
  background: rgb(194, 199, 204);
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  line-height: 36px;
  text-align: center;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

/deep/.el-progress-bar__outer {
  border-radius: 0px;
}
/deep/.el-progress-bar__inner {
  border-radius: 0px;
}

.attic {
  width: 100%;
  min-height: 720px;
  // border: 1px solid red;
  .upper-half {
    height: 50%;
    // border: 1px solid red;
    .title {
      height: 40px;
      line-height: 40px;
      background-color: rgb(122, 184, 251);
    }
    .shelf {
      width: 15%;
      height: 300px;
      margin-top: 20px;
      text-align: center;
      background-color: #eee;
      // border: 1px solid red;
      div {
        width: 90%;
        height: 10%;
        line-height: 31px;
        background-color: #fff;
        margin: 0 auto;
      }
      .archives {
        height: 60%;
        margin: 10px;
      }
    }
  }
}
</style>
